<!DOCTYPE html>
<html lang="zxx">

<head>
  <meta charset="UTF-8" xmlns:th="http://www.thymeleaf.com">
  <title>Boria | Multi purpose Responsive eCommerce HTML Template</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="assets/img/weiyi.png" type="image/png">
  <link rel="stylesheet" href="assets/css/vendor/vendor.min.css" />
  <link rel="stylesheet" href="assets/css/plugin/plugins.min.css" />
  <link rel="stylesheet" href="assets/css/main.min.css">
  <script type="text/javascript" src="js/jquer.js"></script>
  <script type="text/javascript">
    $(function(){
      var num=$("#j-num").attr('value')
      $("#j-jrgwc").click(function (){
        location.href="addCart?num="+num
      })
      $("#j-xd").click(function (){
        location.href="order?num="+num
      })
      $("#w-jian").click(function (){
        if(num=="1"){
          alert("最小数量为 1")
        }
        else {
          num=num*1-1
          $("#j-num").attr('value',num)
        }
      })
      $("#w-jia").click(function (){
        if(num=="5"){
          alert("最大数量为 5")
        }
        else {
          num=num*1+1
          $("#j-num").attr('value',num)
        }
      })
    })
  </script>
  <style>
    body{
      background-color: #F1F2ED;
    }
    .w-onediv{
      position: relative;
      margin: -80px auto;
      width: 1200px;
      height: 740px;
      background-color: #F1F2ED;
    }
    .w-left-div{
      position: absolute;
      left: 0px;
      top: 0px;
      width: 740px;
      height: 740px;
    }
    .w-right-div{
      position: absolute;
      width: 640px;
      height: 540px;
      right: 0px;
      top: 0px;
    }
    .w-img{
      width: 540px;
      height: 540px;
    }
    .w-name{
      font-size: 24px;
      line-height: 36px;
      font-weight: 900;
    }
    .many{
      color: rgb(151, 8, 8);
      font-weight: 900;
    }
    .xhuanzheys{
      font-size: 20px;
      line-height: 40px;
    }
    .xhuanzhe{
      border-top: #c5cfd3 solid 1px;
      border-bottom: #c5cfd3 solid 1px;
      height: 137px;
    }
    .xhuanzhetow{
      height: 147px;
      border-bottom: #c5cfd3 solid 1px;
    }
    .som-img{
      border-radius: 5px;
      border: rgb(151, 8, 8) solid 1px;
      width: 60px;
      height: 60px;
    }
    .dx{
      font-size: 20px;
      line-height: 40px;
    }
    .mashu{

      display: flex;
    }
    .mashu li{
      margin-top: 20px;
      padding: 0 10px;
      margin-right: 10px;
      border: #424c50 solid 1px;
      font-size: 20px;
    }
    .xhuanzhesl{
      display: flex;
      height: 72px;
      border-bottom: #c5cfd3 solid 1px;
    }
    .sl{
      font-size: 20px;
      line-height: 72px;
    }
    .txt{
      text-align: center;
      margin: auto 0;
      width: 52px;
      height: 28px;
    }
    .jiajian{
      display: block;
      text-align: center;
      margin-top: 22px;
      width: 28px;
      height: 21px;
      font-size: 20px;

    }
    .end{
      height: 100px;
      border-bottom: #c5cfd3 solid 1px;
      display: flex;
    }
    .jg{
      margin: auto 0;
      width: 160px;
      height: 38px;
      line-height: 38px;
      font-size: 16px;
      font-weight: 900;
      background-color: black;
      color:rgb(255, 255, 255);

    }
    .gm{
      margin: auto 0;
      margin-left: 8px;
      width: 160px;
      height: 38px;
      line-height: 38px;
      font-size: 16px;
      font-weight: 900;
      background-color: rgb(151, 8, 8);
      color:rgb(255, 255, 255);

    }
    .djgm{
      margin-left: 45px;
    }
    .djjg{
      margin-left: 40px;
    }
    .footer__top{
      margin-top: 100px;
    }
    .cnxh{
      margin-top: 100px;
    }
    .w-xp{
      height: 292px;
    }
  </style>
</head>

<body>
<header>
  <div class="header header--1 d-none d-xl-block">
    <div class="header__tag">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <p class="header__tag-title text-center" th:text="|欢迎用户${#session.getAttribute('user').name}|"></p>
          </div>
        </div>
      </div>
    </div>
    <div class="header__middle sticky-header header__color--silver p-tb-10 d-flex align-items-center">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-xl-4 d-flex align-items-center">
            <!-- Start Logo -->
            <div class="header__logo header__logo--1">
              <a href="index" class="header__logo-link img-responsive">
                <img class="header__logo-img img-fluid" src="assets/img/logo/vans.jpg" alt="">
              </a>
            </div>
            <form class="header__search-form" action="#">
              <div class="header__search-input">
                <button type="submit">
                  <i class="ion-ios-search-strong"></i>
                </button>
                <input type="search" placeholder="搜索卫衣" required>
              </div>
            </form>
          </div>
          <div class="col-xl-8 d-flex align-items-center justify-content-between">
            <div class="header-menu">
              <nav>
                <ul class="header__nav">
                  <!--Start Single Nav link-->
                  <li class="header__nav-item pos-relative"><a href="index" class="header__nav-link header__nav-link--white header__nav-link--white-hover-white">主页 <i class="ion-ios-arrow-down"></i></a>
                    <!--Single Dropdown Menu-->
                    <ul class="dropdown__menu pos-absolute">
                      <li class="dropdown__list"><a href="index.html" class="dropdown__link">新款卫衣</a></li>
                      <li class="dropdown__list">
                        <a href="index-2.html" class="dropdown__link">新款卫衣</a>
                      </li>
                      <li class="dropdown__list"><a href="index-3.html" class="dropdown__link">新款卫衣</a></li>
                      <li class="dropdown__list"><a href="index-4.html" class="dropdown__link">新款卫衣</a></li>
                    </ul>
                    <!--Single Dropdown Menu-->
                  </li>
                  <!-- End Single Nav link-->
                  <!--Start Single Nav link-->
                  <li class="header__nav-item pos-relative"><a href="#" class="header__nav-link header__nav-link--white header__nav-link--white-hover-white">Shop <i class="ion-ios-arrow-down"></i></a>

                  </li>
                  <!-- Start Single Nav link-->
                  <!--Start Single Nav link-->
                  <li class="header__nav-item pos-relative"><a href="#" class="header__nav-link header__nav-link--white header__nav-link--white-hover-white">新品推荐<i class="ion-ios-arrow-down"></i></a>
                    <!-- Megamenu Menu-->

                    <!-- Megamenu Menu-->
                  </li>
                  <!-- Start Single Nav link-->
                  <!--Start Single Nav link-->
                  <li class="header__nav-item pos-relative"><a href="#" class="header__nav-link header__nav-link--white header__nav-link--white-hover-white">社区<i class="ion-ios-arrow-down"></i></a>
                    <!--Single Dropdown Menu-->
                    <ul class="dropdown__menu pos-absolute">
                      <li class="dropdown__list"><a href="myPj" class="dropdown__link">我的动态</a>

                      </li>
                      <li class="dropdown__list">
                        <a href="goPj" class="dropdown__link">精选评价</a>

                      </li>
                      <li class="dropdown__list">
                        <a href="#" class="dropdown__link"></a>

                      </li>
                    </ul>
                    <!--Single Dropdown Menu-->
                  </li>
                  <!-- End Single Nav link-->
                  <!--Start Single Nav link-->
                  <li class="header__nav-item pos-relative"><a href="#" class="header__nav-link header__nav-link--white header__nav-link--white-hover-white">品牌分类<i class="ion-ios-arrow-down"></i></a>
                    <!--Single Dropdown Menu-->
                    <ul class="dropdown__menu pos-absolute">
                      <li class="dropdown__list"><a href="about.html" class="dropdown__link">冠军</a></li>
                      <li class="dropdown__list">
                        <a href="frequently-questions.html" class="dropdown__link">VANS</a>
                      </li>
                      <li class="dropdown__list">
                        <a href="privacy-policy.html" class="dropdown__link">李宁</a>
                      </li>
                      <li class="dropdown__list">
                        <a href="404.html" class="dropdown__link">匡威</a>
                      </li>
                    </ul>
                    <!--Single Dropdown Menu-->
                  </li>
                  <!-- End Single Nav link-->
                  <!--Start Single Nav link-->
                  <li class="header__nav-item pos-relative"><a href="contact.html" class="header__nav-link header__nav-link--white header__nav-link--white-hover-white">关于我们</a></li>
                  <!-- End Single Nav link-->
                </ul>
              </nav>
            </div>
            <!-- End Header Menu -->
            <!-- Start Wishlist-AddCart -->
            <ul class="header__user-action-icon">
              <!-- Start Header Add Cart Box -->
              <li class="header-add-cart pos-relative"><a href="wishlist" class="offcanvas-toggle"><i class="ion-bag"></i><span class="wishlist-item-count wishlist-item-count--red pos-absolute" th:text="${#session.getAttribute('cartNum')}">3</span></a></li>
              <!-- End Header Add Cart Box -->
              <!-- Start Header User Offcanvas -->
              <li class="header-user-sidebar pos-relative"><a href="myOrder" class="offcanvas-toggle"><i class="ion-navicon-round"></i></a></li>
              <!-- End Header User Offcanvas -->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="header__mobile mobile-header--1 d-block d-xl-none">
      <div class="container">
        <div class="row align-items-center justify-content-between">
          <div class="col-4">
            <ul class="header__mobile--leftside d-flex align-items-center justify-content-start">
              <li>
                <a href="#offcanvas-mobile-menu" class="offcanvas-toggle">
                  <i class="ion-navicon-round"></i>
                </a>
              </li>
              <li>
                <div class="header__mobile-logo">
                  <a href="index" class="header__mobile-logo-link">
                    <img src="assets/img/logo/logo-color-red.png" alt="" class="header__mobile-logo-img img-fluid">
                  </a>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-8">
            <ul class="header__mobile--rightside d-flex align-items-center justify-content-end">
              <li class="pos-relative">
                <button class="popup__search-box">
                  <i class="fal fa-search"></i>
                </button>
                <form id="header__popup-search-form" class="header__popup-search-form pos-absolute" action="#">
                  <div class="d-flex">
                    <input type="search" placeholder="搜索卫衣" required>
                    <button class="btn btn--submit btn--black" type="submit">
                      <i class="fal fa-search"></i>
                    </button>
                  </div>
                </form>
                <!-- End Header Add Cart Box -->
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div id="offcanvas-add-cart__box" class="offcanvas offcanvas-cart offcanvas-add-cart">
      <div class="offcanvas__top">
                <span class="offcanvas__top-text">
                        <i class="ion-bag"></i>
                    </span>
        <button class="offcanvas-close">
          <i class="fal fa-times"></i>
        </button>
      </div>
    </div>
  </div>
</header>
<!--::::::End Header Section::::::-->
<!--::::::Start Breadcrumb Section::::::-->
<div class="page-breadcrumb" style="height: 20px; background-color:#424c50;"></div>
</div>
<div class="cnxh">
  <div class="product m-t-100">
    <div class="container">
      <div class="row">
        <div class="clearfix">
          <!-- Start Single Category Product -->
          <div class="product__box product__box--catagory product__box--border-hover text-center pos-relative" th:each="goods,goodsList:${goodList}">
            <div class="product__img-box">
              <a th:href="|shangping?id=${goods.id}|" class="product__img--link  glossy-flash-animate"><img class="w-xp product__img" th:src="${goods.img}" alt=""></a>
            </div>
            <div class="product__content--catagory pos-absolute">
              <a th:href="|shangping?id=${goods.id}|" class="btn btn--box btn--tiny btn--gray btn--gray-hover-red font--bold text-uppercase" th:text="${goods.name}">VANS 棋盘格</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer class="footer">
    <div class="container" >
      <!-- Start Footer Top Section -->
      <div class="footer__top">
        <div class="row">
          <div class="col-lg-2 col-sm-6 col-12">
            <!-- Start Footer Nav -->
            <div class="footer__menu">
              <h4 class="footer__nav-title footer__nav-title--dash footer__nav-title--dash-red">信息</h4>
              <ul class="footer__nav">
                <li class="footer__list"><a href="#" class="footer__link">交付信息</a></li>
                <li class="footer__list"><a href="#" class="footer__link">交易条款</a></li>
                <li class="footer__list">
                  <a href="#" class="footer__link">福利</a>
                </li>
              </ul>
            </div>
            <!-- End Footer Nav -->
          </div>
          <div class="col-lg-2 col-sm-6 col-12">
            <div class="footer__menu">
              <h4 class="footer__nav-title footer__nav-title--dash footer__nav-title--dash-red">我的账户</h4>
              <ul class="footer__nav">
                <li class="footer__list"><a href="#" class="footer__link">订单</a></li>
                <li class="footer__list"><a href="#" class="footer__link">历史</a></li>
                <li class="footer__list"><a href="#" class="footer__link">隐私</a></li>
                <li class="footer__list"><a href="#" class="footer__link">问题</a></li>

              </ul>
            </div>
          </div>
          <div class="col-lg-4 col-sm-6 col-12">
            <div class="footer__about">
              <div class="footer__logo">
                <a href="index.html" class="footer__logo-link"><img src="assets/img/logo/logo-color-red.png" alt="" class="footer__logo-img"></a>
              </div>
              <ul class="footer__address">
                <li class="footer__address-item">关于我们</li>
                <li class="footer__address-item">地址：</li>
                <li class="footer__address-item">联系电话</li>
              </ul>
              <ul class="footer__social-nav">
                <li class="footer__social-list"><a href="#" class="footer__social-link"><i class="fab fa-facebook-f"></i></a></li>
                <li class="footer__social-list"><a href="#" class="footer__social-link"><i class="fab fa-twitter"></i></a></li>
                <li class="footer__social-list"><a href="#" class="footer__social-link"><i class="fab fa-youtube"></i></a></li>
                <li class="footer__social-list"><a href="#" class="footer__social-link"><i class="fab fa-google-plus-g"></i></a></li>
                <li class="footer__social-list"><a href="#" class="footer__social-link"><i class="fab fa-instagram"></i></a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-4 col-sm-6 col-12">
            <div class="footer__form">
              <h4 class="footer__nav-title footer__nav-title--dash footer__nav-title--dash-red">收藏我们</h4>
              <p>更新后会第一时间通知哦!</p>
              <form action="#" class="footer__form-box"><input type="email" placeholder="" required><button class="btn btn--red btn--red-hover-red btn--uppercase font--bold" type="submit">收藏!</button></form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>
</body>
</html>